<template>
  <div id="notice">
    <h1>Welcome</h1>
    <h3>{{ SupportWebSocket }}</h3>
    <input id="text" type="text" v-model="inputMsg" placeholder="输入消息"/>
    <button @click="sendMsgByWebSocket">发送消息</button>
    <hr/>
    <button @click="closeWebSocket" v-if="websocket != null">关闭WebSocket连接</button>
    <hr/>
    <div id="message" v-text="message">message</div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: "Notice",
  data() {
    return {
      inputMsg: "",
      message: "hello",

      websocket: null,
      websocketConnActionMsg: "",

      SupportWebSocket: "",
      SupportNotification: false
    }
  },
  mounted: function () {
    // this.test();
    this.notifyByExplorer("hello");

    let that = this;
    let websocket = null;
    const WebSocketServerUrl = "ws://127.0.0.1:8080/api/notice?token=test";

    //判断当前浏览器是否支持WebSocket
    if ('WebSocket' in window) {
      that.SupportWebSocket = "该浏览器支持 websocket"
      websocket = new WebSocket(WebSocketServerUrl);
      that.websocket = websocket;
    } else {
      that.SupportWebSocket = "该浏览器不支持 websocket"
      alert('当前浏览器不支持 WebSocket!')
      return
    }

    if ("Notification" in window) {
      that.SupportNotification = true;
      console.log("浏览器支持消息通知");
      Notification.requestPermission();
    } else {
      that.SupportNotification = false;
      console.log("浏览器不支持消息通知");
    }

    //连接发生错误的回调方法
    websocket.onerror = function () {
      that.message = "WebSocket连接发生错误";
    };

    //连接成功建立的回调方法
    websocket.onopen = function () {
      that.message = "WebSocket连接成功";
      // that.websocketConnActionMsg = "关闭 WebSocket";
    }

    // var U01data, Uidata, Usdata
    //接收到消息的回调方法
    websocket.onmessage = function (event) {
      console.log(event);
      that.message = event.data;
      that.notifyByExplorer(event.data);
    }

    //连接关闭的回调方法
    websocket.onclose = function () {
      console.log("WebSocket连接关闭");
      that.websocket = null;
      // that.websocketConnActionMsg = "连接 WebSocket";
    }

    //监听窗口关闭事件，当窗口关闭时，主动去关闭websocket连接，防止连接还没断开就关闭窗口，server端会抛异常。
    window.onbeforeunload = function () {
      that.websocket.close();
    }
  },

  methods: {
    test: function () {
      alert("test success");
    },

    //关闭WebSocket连接
    closeWebSocket: function () {
      this.websocket.close();
    },

    //发送消息
    sendMsgByWebSocket: function () {
      if (this.websocket == null) {
        alert("连接已关闭，请刷新页面！")
        return;
      }
      this.websocket.send('{"msg":"' + this.inputMsg + '"}');
    },

    // 申请浏览器通知权限
    notification: function () {
      let that = this;
      if (!("Notification" in window)) {
        console.log("浏览器不支持消息通知");
        return;
      }
      // Notification.requestPermission(function (permission) {});
      Notification.requestPermission();
    },

    // 发送浏览器消息提醒(Windows10是由系统接管)
    notifyByExplorer (msg) {
      let that = this;

      // 不在当前页面
      // if (document.hidden) {
      //
      // }

      let options = {
        body: '您有新的未读消息，请及时处理',
        silent: false,
      };
      let notification = new Notification(msg, options);
      notification.onclick = function () {
        window.open(`页面链接`, '_blank');
      }

      //标题栏闪动
      let defaultTitle = document.title;
      if (that.isReceive) {
        return;
      } else {
        that.isReceive = true;
      }
      console.log(that);


      // that.timer = setInterval(function () {
      //   var title = document.title;
      //   if (document.hidden && that.isReceive) {
      //     if (/你有新消息/.test(title) == false) {
      //       document.title = '【你有新消息】';
      //     } else {
      //       document.title = defaultTitle;
      //     }
      //   } else {
      //     that.isReceive = false;
      //     document.title = defaultTitle;
      //   }
      // }, 500);

    }

  }

}
</script>

<style scoped>

</style>